<template>

    <div class="table-modal" :class="{ 'show' : isShow  }">
        <div class="modal_container">
            <div class="modal_close">
                <img src="@/assets/img/icon/close.png" class="icon" alt="icon" @click="closeModal(0)" />

            </div>
            <div class="modal_content">
                <table class="table table-border table_layout">
                
                    <thead>
                        <tr>
                            <td>
                                编码
                            </td>
                            <td>
                                名称
                            </td>
                             <td>
                                型号
                            </td>
                            <td>
                                规格 
                            </td>
                            <td>
                                数量 
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                         <tr v-for="item in 5">
                            <td>
                            48071
                            </td>
                            <td>
                            穿刺刀cvs(23GA联合手术套包-5000CPM/0.9MM)(美国爱尔康)
                            </td>
                            <td>
                                80657516007
                            </td>
                        
                            <td>
                                个
                            </td>
                            <td>
                                1
                            </td>
                            　　
                        </tr>
                    </tbody>
                   
                </table>

            </div>
        </div>
    </div>

</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue,
        Watch
    } from 'vue-property-decorator';

    @Component


    export default class Table extends Vue {
        @Prop({
            type: Boolean, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: '' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数 
        }) toTableBlock!: Boolean;

        isShow = this.toTableBlock;

        @Watch('toTableBlock')
        ontoTableBlockChanged(val: boolean, oldVal: boolean) {
            this.isShow = val;

        }

        created() {

        }

        closeModal(type: any) {
          
            this.isShow = false;
            this.$emit('closeModal', this.isShow);
        }
    }
</script>


<style lang="scss" scoped>
    .table-modal {
        @include modal_bg;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: $modal_index;
        display: none;

        .modal_container {
            height: 600px;
            width: 80%;
            border-radius:0;
            @include box_shadow;

            .modal_title {
                text-align: center;
                padding: 12px;

                h3 {
                    color: #999;
                }
            }

            .modal_content {
                
                table{
                    thead{
                        td{
                            background:$themecolor;
                            color:$color;
                            height:65px;
                            font-size:0.2rem;
                        }
                    }
                    tbody{
                        td{
                            color:$themecolor;
                            height:55px;
                        }
                    }
                }
            }

            .modal_close,
            .modal_right {
                img {
                    width: 45px;
                    position: absolute;
                    right: -18px;
                    top: -18px;
                }
            }

            .modal_right {
                img {
                    left: -18px;
                }
            }
        }
    }
</style>